<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情页</title>
    <link rel="stylesheet" type="text/css" href="common.css">
    <style type="text/css">
        .product-detail {
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            padding: 25px;
            width: 80%;
            max-width: 600px;
            margin: 0 auto;
        }
        .product-detail * {
            font-style: normal !important;
        }
        .product-image {
            width: 100%;
            height: auto;
            max-width: 300px;
            margin-bottom: 25px;
            border-radius: 5px;
        }
        .product-title {
            font-size: 30px;
            font-weight: bold;
            margin-bottom: 10px;
            text-align: center;
        }
        .product-price-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        .product-price {
            color: #ff6b6b;
            font-size: 24px;
            text-decoration: line-through;
            margin-right: 10px;
        }
        .product-discounted-price {
            color: #FF5F1C;
            font-size: 26px;
            font-weight: bold;
        }
        .product-sale-details {
            font-size: 18px;
            color: #6c757d;
            margin: 10px 0;
        }
        .btn-cart {
            display: inline-block;
            background-color: #FF5F1C;
            color: #fff;
            font-size: 16px;
            font-weight: bold;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            text-decoration: none;
            margin-top: 20px;
            transition: background-color 0.3s ease;
        }
        .btn-cart:hover {
            background-color: #FF461CFF;
        }
    </style>
    <script type="text/javascript" src="common.js"></script>
    <script type="text/javascript">
        function addToCart() {
            let params = window.location.search;
            let urlParams = new URLSearchParams(params.substring(1));
            let mainImg = urlParams.get("mainImg");
            let title = urlParams.get("title") || "--";
            let discountPrice = parseInt(urlParams.get("price")) * (1 - parseFloat(urlParams.get("discount"))/10) || "--";
            let cartList = JSON.parse(localStorage.getItem("cartList") || "[]");
            if (cartList.some(item => item.title === title)) {
                cartList.filter(item => item.title === title)[0]["count"] += 1;
            } else {
                cartList.push({
                    mainImg: mainImg,
                    title: title,
                    price: discountPrice,
                    count: 1
                });
            }
            localStorage.setItem("cartList", JSON.stringify(cartList));
            alert("添加到购物车成功");
            window.location.href = "./cart.html";
        }
        window.onload = function () {
            initAsideBar();
            let params = window.location.search;
            let urlParams = new URLSearchParams(params.substring(1));
            let imgContainer = document.getElementsByClassName("product-image")[0];
            imgContainer.setAttribute("src", urlParams.get("mainImg"));
            let titleContainer = document.getElementsByClassName("product-title")[0];
            titleContainer.innerText = urlParams.get("title") || "--";
            let priceContainer = document.getElementsByClassName("product-price")[0].getElementsByTagName("em")[0];
            priceContainer.innerHTML = urlParams.get("price") || "--";
            let discountPriceContainer = document.getElementsByClassName("product-discounted-price")[0].getElementsByTagName("em")[0];
            discountPriceContainer.innerText = parseInt(urlParams.get("price")) * (1 - parseFloat(urlParams.get("discount"))/10) + "" || "--";
            let discountContainer = document.getElementsByClassName("product-sale-details")[0].getElementsByTagName("em")[0];
            discountContainer.innerText = parseFloat(urlParams.get("discount")) + "" || "--";
            let shippingContainer = document.getElementsByClassName("product-sale-details")[1].getElementsByTagName("em")[0];
            shippingContainer.innerText = urlParams.get("shipping") || "--";
            let sealCntContainer = document.getElementsByClassName("product-sale-details")[2].getElementsByTagName("em")[0];
            sealCntContainer.innerText = urlParams.get("sealCnt") || "--";
        }
    </script>
</head>
<body>
<!-- 侧边栏 -->
<div id="aside-navbar">
    <span id="toggle-control" class="opend">&gt;&gt;</span>
    <div id="aside-content-list">
        <div class="aside-content-list-item">
            <span class="market-list" onclick="goCart()">&#xe600;</span>
            <i class="market-list-text">购物车</i>
        </div>
        <div class="aside-content-list-item">
            <span class="market-list" onclick="nothing()">&#xe62d;</span>
            <i class="market-list-text">我的优惠</i>
        </div>
        <div class="aside-content-list-item">
            <span class="market-list" onclick="nothing()">&#xe603;</span>
            <i class="market-list-text">我的收藏</i>
        </div>
        <div class="aside-content-list-item">
            <span class="market-list" onclick="nothing()">&#xe64d;</span>
            <i class="market-list-text">浏览记录</i>
        </div>
    </div>
    <span id="back-top">&#xe604;</span>
</div>
<div class="product-detail">
    <!-- 商品主图 -->
    <img class="product-image" src="" alt="商品主图">

    <!-- 商品标题 -->
    <h2 class="product-title">商品标题</h2>

    <!-- 商品价格信息 -->
    <div class="product-price-container">
        <span class="product-price">￥<em>原价</em></span>
        <span class="product-discounted-price">￥<em>折扣价</em></span>
    </div>

    <!-- 折扣信息 -->
    <div class="product-sale-details">折扣信息：<em>XXX</em>折优惠</div>

    <!-- 包邮信息 -->
    <div class="product-sale-details">配送信息：<em>XXX</em></div>

    <!-- 售出信息 -->
    <div class="product-sale-details">已售出：<em>XXX</em>件</div>

    <!-- 加入购物车按钮 -->
    <a href="#" class="btn-cart" onclick="addToCart()">加入购物车</a>
</div>
</body>
</html>
